<template>
  <div
    class="flex items-center justify-center min-h-screen h-screen dark:bg-gray-900 overflow-hidden"
  >
    <div
      class="flex items-center justify-between space-x-4 w-full max-w-lg px-4"
    >
      <!-- Logo 部分 -->
      <div>
        <img
          src="../../../../assets/logo.gif"
          alt="Logo"
          class="rounded-sm p-2 shadow-lg sm:w-12 sm:h-12 md:w-24 md:h-24 lg:w-32 lg:h-32"
        />
      </div>

      <!-- 404 错误信息 -->
      <div class="text-center flex-grow">
        <p class="font-semibold text-gray-800 dark:text-white">
          你所访问的网页不存在!
        </p>
        <!-- 计时显示 -->
        <div class="mt-4 text-gray-500 dark:text-gray-300">
          <p>
            <span class="font-semibold">{{ `${countdown}s后前往首页` }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'NotFound',
  setup() {
    const countdown = ref(5)
    const router = useRouter()

    // 设置倒计时
    const interval = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value -= 1
      } else {
        clearInterval(interval)
        router.push('/')
        // 5秒后跳转到主页
      }
    }, 1000)

    // 页面挂载时执行计时器
    onMounted(() => {
      interval
    })
    onBeforeUnmount(() => {
      clearInterval(interval)
    })

    return { countdown }
  }
}
</script>

<style scoped>
/* 可以在这里加入更多的自定义样式 */
</style>
